import { Tooltip } from 'antd';
import React, { useMemo } from 'react';

import { BaseTable, utils, RenderValue, HeadHighlight } from '@/components/BaseTable';
import _ from 'lodash';

export default function PriceAdjustmentBuilding({ data, loading, showExport, onClickExportExcel }) {
  const titleTree = useMemo(
    () => [
      {
        key: 'index',
        name: '序号',
        colspan: 1,
        rowspan: 2,
        style: {
          background: 'red',
        },
      },
      {
        key: 'edition',
        name: '价格调整对象',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: '均价偏离度',
        key: 'entireProject',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('战规版')}>
            战规版均价
          </HeadHighlight>
        ),
        key: '1',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('集团审批版')}>
            集团审批版均价
          </HeadHighlight>
        ),
        key: '2',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: '调整前均价',
        key: '3',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: <HeadHighlight isHighlight>调整后均价</HeadHighlight>,
        key: '4',
        colspan: 1,
        rowspan: 2,
      },
      {
        name: '价额差异 (元)',
        key: '5',
        rowspan: 1,
        children: [
          {
            key: '9',
            rowspan: 1,
            colspan: 1,
          },
          {
            key: '6',
            rowspan: 1,
            colspan: 1,
          },
          {
            key: '8',
            rowspan: 1,
            colspan: 1,
          },
        ],
      },
    ],
    [data.marsVersions],
  );
  const columns = useMemo(
    () => [
      {
        key: 'id',
        dataKey: 'id',
        width: 50,
        frozen: 'left',
        align: 'center',
        dataGetter: ({ rowIndex }) => rowIndex + 1,
      },
      {
        key: 'objectName',
        dataKey: 'objectName',
        width: 280,
        // frozen: 'left',
        cellRenderer: ({ rowData }) => (
          <Tooltip placement="topLeft" title={rowData.objectName}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {rowData.objectName}
            </div>
          </Tooltip>
        ),
      },
      {
        key: 'divergeRate',
        dataKey: 'divergeRate',
        width: 110,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.divergeRate ? rowData.divergeRate * 100 : rowData.divergeRate,
          valueType: 'percentDiff',
          precision: 2,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'strategyAvg',
        dataKey: 'strategyAvg',
        width: 110,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.strategyAvg,
          valueType: 'money',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'presidentAvg',
        dataKey: '集团审批版均价',
        width: 110,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData?.presidentAvg,
          valueType: 'money',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'beforeAvg',
        dataKey: 'beforeAvg',
        width: 110,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.beforeAvg,
          valueType: 'money',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterAvg',
        dataKey: 'afterAvg',
        width: 110,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.afterAvg,
          valueType: 'money',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterStrategy',
        dataKey: 'afterStrategy',
        width: 150,
        headerRenderer: () => (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('战规版')}>
            调整后-战规版均价
          </HeadHighlight>
        ),
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.afterStrategy,
          valueType: 'positiveAndNegativeDiff',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterPresident',
        dataKey: 'afterPresident',
        width: 150,
        headerRenderer: () => (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('集团审批版')}>
            调整后-集团审批版均价
          </HeadHighlight>
        ),
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.afterPresident,
          valueType: 'positiveAndNegativeDiff',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterBfore',
        dataKey: 'afterBfore',
        width: 110,
        title: '调整后-调整前',
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.afterBfore,
          valueType: 'positiveAndNegativeDiff',
          precision: 0,
        }),
        cellRenderer: <RenderValue />,
      },
    ],
    [data.marsVersions],
  );
  const headerRenderer = utils.getHeaderRenderer(titleTree, 1);
  if (_.isEmpty(data.list)) return null;
  return (
    <div>
      <div className="sub-title">
        本次调价楼栋
        {showExport ? <a onClick={onClickExportExcel}>导出</a> : null}
      </div>
      <BaseTable
        fixHeight={35 * data.list.length + 70}
        columns={columns}
        headerHeight={[30, 30]}
        headerRenderer={headerRenderer}
        treeData={data.list}
        loading={loading || false}
      />
    </div>
  );
}
